<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>DOM案例-名单抽奖程序</title>
  <style type="text/css">
    #demo {
      width: 1200px;
      height: 722px;
      background: url(bg.jpg);
      text-align: center;
      position: relative;
    }

    /* 显示布局轮廓 */
    #prize_btn {
      width: 200px;
      height: 100px;
      font-size: 48px;
      margin: 50px auto 0;
    }

    #prizes_list {
      width: 1000px;
      height: 500px;
      /* border: 1px solid #fff; */
      margin: 50px auto;
      display: flex;
      /* 伸缩盒，子元素弹性布局 */
    }

    .pitem {
      flex: 1;
      background: rgba(255, 255, 255, 0.3);
      margin: 5px;
      border-radius: 10px;
    }

    .ptitle {
      color: #ff0;
      font-size: 28px;
      background: rgba(0, 0, 0, 0.2);
      line-height: 50px;
      border-radius: 10px 10px 0 0;
    }

    .plist {
      color: #ff0;
      font-size: 28px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .plist>li {
      text-align: left;
      padding-left: 30px;
      list-style: inside decimal;
      margin: 5px 0;
      background: rgba(255, 255, 255, 0.3);
    }

    #prize_rnd {
      width: 800px;
      height: 200px;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 200px;
      top: 300px;
      border-radius: 20px;
      display: none;
      font-size: 72px;
      color: #fff;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <div id="demo">
    <button type="button" id="prize_btn" onclick="start()">开始</button>
    <div id="prizes_list"><!-- 奖项区域 --></div>
    <div id="prize_rnd"><!-- 滚动显示随机抽奖区 --></div>
  </div>
  <script type="text/javascript">
			/* 
			* 抽奖程序：根据名单和设置的奖项，随机不重复抽奖，并显示到页面相应的奖项区。
			* 考查知识点：DOM获取页面元素、新建元素、设置元素等；
			* 			JavaScript基础知识点，字符串格式化处理、数组、洗牌算法、函数等
			* 基本思路：
			* 		1.html部分，写出必要的html框架，动态变化的标签（奖项列表区）由js脚本完成
			* 		2.初始化布局及相关变量（奖项定义），根据奖项动态生成页面标签
			* 		3.名单字符串的处理
			* 		4.随机抽奖，洗牌算法，每次从未中奖的名单中随机抽取，报纸中奖名单不重复
			*  		5.中奖名单处理，写入页面相应的奖项列表区。
			* 
			* */
    var stu_str =
      "赵妮宝,17057274086;孟宁龙,17047810451;李进阳,17088323008;张苏,17013906513;吴娄珂,17066699826;胡博鸣,17082120892;易子,17068674477;贺海,17013714174;朱晓,17063519184;赵起辉,17093003334;郭春,17049709288;叶傲英,17097762881;徐万宇,17016398304;张绍,17018681702;张广能,17050787728;张士龙,17040039698;吴佳,17077768696;秦纪芳,17043299107;汪重,17074168053;刘新龙,17076374725;王浩,17085792082;郭明辉,17051962595;乔鹏新,17073718087;高云,17069308701;刘思辉,17085667441;邹晓雨,17041121612;刘富坡,17033055475;王鹏瑞,17080726451;王鹏庆,17061260529;冯昊,17089553046;苏创彬,17065511460;王晨远,17011637584;庞明,17084711922;王浩光,17062012677;李鏖飞,17059978064;王哲,17094115593;付星辉,17067998356;张东斌,17038404209;王明帅,17038671546;理梦宁,17040051091;谢傲俊,17058745571;刘瑞倩,17090234866;赵颖森,17064761255;刘业丰,17075062481;孟云然,17044216589;夏晓雨,17091978291;杨展,17025811192;袁爽冰,17082839405;胡帅珂,17024631222;顾文,17033335199;王高刚,17037219018;张小月,17082591613;陈鑫昌,17029199254;刘思龙,17047911429;张婷欢,17022094466;陈浩,17082886568;孔志丹,17064541482;李龙龙,17087899092;刘浩,17076870998;王子瑞,17050204170;孔艳杰,17014071459;白圣康,17084761890;刘成静,17016626005;袁玉霞,17054949554;谢亚康,17049718132;万旭蒙,17073909316;李亚恩,17056559843;李瑞仑,17083197726;龚诚龙,17016845557;许云龙,17077732958;陈庆辉,17049690667;张少敬,17033036995;杨逸,17088934681;张蒙,17001097600;高伟鹏,17081454834;田爽,17051902637;师家,17082202535;赵豪,17019157730;薛燕恒,17073852988;李冰芳,17036447179;乔寒宇,17031134144;赵红,17072187603;苏洋朋,17036416578;李敬发,17005666426;郑炯方,17054301399;陆茗,17062559335;刘国强,17066795972;刘琦辉,17051704001;任令星,17086281607;吴燕洲,17028037852;朱璠琪,17073858380;张浩,17068022791;张中琳,17053661817;丁飞,17070623545";
    var prizes = [
      ["一等奖", 1],
      ["二等奖", 3],
      ["三等奖", 5],
    ];
    prizes.reverse();
    //初始化布局
    var plist = document.getElementById("prizes_list");
    prizes.forEach((p, i) => {
      //各奖项区div
      let pdiv = document.createElement("div");
      pdiv.id = "p-" + i;
      pdiv.className = "pitem";
      //当前奖项标题
      let ptitle = document.createElement("div");
      ptitle.className = "ptitle";
      ptitle.innerHTML = p[0];
      //当前奖项名单区
      let pul = document.createElement("ul");
      pul.id = "plist-" + i;
      pul.className = "plist";
      pdiv.appendChild(ptitle);
      pdiv.appendChild(pul);
      plist.appendChild(pdiv);
    });
    //抽奖功能==========
    //解析学生名单
    var stus = stu_str.split(";");
    //随机抽取学生
    // var stu_index=~~(Math.random()*stus.length)//取整~~、Math.floor、parseInt
    //按开始按钮，滚动随机学生名单，确定后停止（开始、确定互换）
    var ttimer, stu, stu_i;
    var p_index = 0,
      p_count = 0; //当前奖项索引，当前奖项计数
    var p_total = 0; //已抽奖数量合计
    function start() {
      let p_btn = document.getElementById("prize_btn");
      let p_rnd = document.getElementById("prize_rnd");
      if (p_btn.innerHTML == "开始") {
        //点击开始，随机显示
        p_btn.innerHTML = "确定";
        //抽奖，解决重复中奖问题。洗牌算法
        ttimer = setInterval(() => {
          stu_i = ~~(Math.random() * (stus.length - p_total) + p_total);
          p_rnd.style.display = "block";
          stu = stus[stu_i].split(",");
          p_rnd.innerHTML = stu[0] + "<br>" + stu[1];
        }, 100);
      } else {
        //点击确定，停止（取消定时器）
        p_btn.innerHTML = "开始";
        clearInterval(ttimer);
        //确定中奖名单后，将中奖信息写入到页面相应奖项区
        let tmp = stus[p_total];
        stus[p_total] = stus[stu_i];
        stus[stu_i] = tmp;
        stu = stus[p_total].split(",");
        let pul = document.querySelector("#plist-" + p_index);
        let pli = document.createElement("li");
        pli.className = "plist_li";
        pli.innerHTML = stu[0];
        pli.setAttribute("title", stu[1]);
        pul.appendChild(pli);
        p_count++;
        p_total++;
        //判断当前奖项是否已完成
        if (p_count == prizes[p_index][1]) {
          p_index++;
          //判断所有奖项是否完成
          if (p_index < prizes.length) {
            p_count = 0;
          } else {
            // alert('完成抽奖')
            p_rnd.style.display = "none";
            p_btn.removeAttribute("onclick");
          }
        }
      }
    }
  </script>
</body>

</html>